<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8">
	<title>基于 layui 的极简社区页面模版</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="keywords" content="fly,layui,前端社区">
	<meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
	<link rel="stylesheet" href="../res/layui/css/layui.css">
	<link rel="stylesheet" href="../res/css/global.css">
	<link rel="stylesheet" href="../layer/mobile/need/layer.css" />
	<script type="text/javascript" src="../layer/layer.js"></script>
	<script type="text/javascript" src="../res/js/jquery-1.11.3.min.js"></script>
	<style type="text/css">
		.fly-avatar img {
			width: 60px;
			height: 60px;
			border-radius: 100%;
		}
		/*隐藏滚动条*/
		body {
			background: #ffffff;
			overflow-x: hidden;
			overflow-y: hidden;
		}
		.fly-list li {
			height: 100%;
			margin-top: 10px;
		}

		.fly-list-info {
			margin-left: 16px;
		}

		.fly-list li h2 {
			margin-left: 85px;
			margin-top: 9px;
		}

		.fly-list li h2 a {
			padding-top: 15px;
			margin-top: 10px;
		}

		.layui-textarea {
			min-height: 20px;
			width: 90%;
			margin-left: 10px;
			margin-bottom: 10px;
		}

		.site-demo-flow img {
			width: 32%;
			height: 32%;
		}
	</style>
</head>

<body style="margin-top: 10px;">

<div class="layui-container">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md8">
			<div class="fly-panel">
				<!--评论区-->
				<div class="fly-list-info">
					<i class="iconfont icon-pinglun1" title="评论" style="cursor: pointer;">
						<textarea placeholder="请输入内容" class="layui-textarea" style="min-height:150px"></textarea>

					</i>

				</div>

				<div class="layui-upload" style="width: 90%;margin-left: 26px;">
					<button type="button" class="layui-btn" id="test2">图片上传</button><input class="layui-upload-file" type="file" name="file" multiple="">
					<div class="site-demo-flow" id="LAY_demo3" style="margin-top: 5px;">
						<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876" layer-index="0">
						<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876" layer-index="1">
						<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876" layer-index="2">
						<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876" layer-index="3">
						<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876" layer-index="0">
						<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876" layer-index="1">
						<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876" layer-index="2">
						<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876" layer-index="3">
						<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876" layer-index="0">
						<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876" layer-index="1">
						<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876" layer-index="2">
						<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876" layer-index="3">
						<img src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1516269303876" layer-index="0">
						<img src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1516269303876" layer-index="1">
						<img src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1516269303876" layer-index="2">
						<img src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1516269303876" layer-index="3">

					</div>
				</div>

				<!--提交区域-->
				<div class="layui-input-block" style="margin-top: 10px;margin-bottom: 10px;">
					<button class="layui-btn" lay-submit="" lay-filter="demo1">发布</button>
					<button type="reset" class="layui-btn layui-btn-primary" id="cennl">取消</button>
				</div>

			</div>

		</div>
	</div>

</div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    /*取消跳转到主页*/
    $("#cennl").off().on("click",function(){
        location.href = 'index.html';
    })
    /*对图片进行一个预览*/
    layui.use('layer', function() {
        var layer = layui.layer;
        layer.photos({
            photos: '#LAY_demo3',
            anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });

    });
    layui.use('upload', function() {
        var upload = layui.upload;
        //多图片上传
        upload.render({
            elem: '#test2',
            url: '/upload/',
            multiple: true,
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                });
            },
            done: function(res) {
                //上传完毕
            }
        });
        /*//执行实例
        var uploadInst = upload.render({
            elem: '#test2' //绑定元素
                ,
            url: '/upload/' //上传接口
                ,
            done: function(res) {
                //上传完毕回调
            },
            error: function() {
                //请求异常回调
            }
        });*/
    });
</script>
</body>

</html>